<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div :id="treeId" class="ztree zlst-module-ztree " :class="{outlooktree:isOutlookStyle}">

    </div>
</template>

<script>
    import '../../../static/ztree/js/jquery.ztree.all'
    import '../../../static/ztree/css/zTreeStyle/zTreeStyle.css'

    // 用来缓存vue对象，提供给ztree对象内部方法中（因为无法把vue对象传入进去，否则就要改源代码了）
    var currentVueObj = null;

    // checkbox 或者 radio 生效的默认配置文件
    var ztreeCheckableDefaultSetting = {
        enable: false,
        // 设置自动关联勾选时是否触发 beforeCheck / onCheck 事件回调函数,默认是false
        autoCheckTrigger: false,
        // 勾选 checkbox 对于父子节点的关联关系。[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]
        // 默认值：{ "Y": "ps", "N": "ps" }
        //JSON 格式说明
        // Y 属性定义 checkbox 被勾选后的情况；
        // N 属性定义 checkbox 取消勾选后的情况；
        // "p" 表示操作会影响父级节点；
        // "s" 表示操作会影响子级节点。
        chkboxType: { "Y": "ps", "N": "ps" },
//                        勾选框类型(checkbox 或 radio）[setting.check.enable = true 时生效]
        chkStyle:"checkbox",
        //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
//                        1、只使用于初始化节点时，便于批量操作。 对于已存在的节点请利用 updateNode 方法单个节点设置
        // true 表示 新加入子节点时，自动继承父节点 nocheck = true 的属性。
        // false 表示 新加入子节点时，不继承父节点 nocheck 的属性。
        nocheckInherit: false,
        // 当父节点设置 chkDisabled = true 时，设置子节点是否自动继承 chkDisabled = true 。[setting.check.enable = true 时生效]
        //1、只使用于初始化节点时，便于批量操作。 对于已存在的节点请利用 setChkDisabled 方法单个节点设置。
        //true 表示 新加入子节点时，自动继承父节点 chkDisabled = true 的属性。
        //false 表示 新加入子节点时，不继承父节点 chkDisabled 的属性。
        chkDisabledInherit: false,
        //  radio 的分组范围。[setting.check.enable = true 且 setting.check.chkStyle = "radio" 时生效]
        //  radioType = "level" 时，在每一级节点范围内当做一个分组。
        //radioType = "all" 时，在整棵树范围内当做一个分组。
        radioType: "all"
    };

    /**
     *  自定义节点的渲染成的HTML
     */
    function addDiyDom(treeId, treeNode) {
        var spaceWidth = 18;
        // 节点前面的展开 收缩 图标对象
        var switchObj = $("#" + treeNode.tId + "_switch");
        // 节点图标
        var icoObj = $("#" + treeNode.tId + "_ico");
        var spanObj = $("#" + treeNode.tId + "_span");
        // 判断是否显示菜单图标
        if(treeNode.iconName != undefined){
            spanObj.html('<i class="icon iconfont '+treeNode.iconName+'" style="font-size: 14px;margin-right: 5px;"></i>'+spanObj.html());
        }
        // 删除默认的收缩 和 展开 图标
        switchObj.remove();
        // 将默认的收缩 和 展开 图标对象 放在 节点图标对象前面
        icoObj.before(switchObj);
        if (treeNode.level > 0) {
            var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level) + "px'></span>";
            switchObj.before(spaceStr);
        }

        // 节点下面的a 标签对象
        var aObj = $("#" + treeNode.tId + "_a");
        // 让该节点作为参考节点布局
        aObj.css({position: "relative"});
        var userNodeBtnStr = '<div class="user_node_btn" style="position: absolute;top:0px;right: 0px;">';
        // 显示增加按钮
        if(treeNode.showAddBtn){
            userNodeBtnStr = userNodeBtnStr + '<button id="diyBtn_add' + treeNode.id + '" class="diyBtn diyBtn-add" title="新增"></button>';
        }
        // 显示编辑按钮
        if(treeNode.showRenameBtn){
            userNodeBtnStr = userNodeBtnStr + '<button id="diyBtn_edit' + treeNode.id + '" class="diyBtn diyBtn-edit" title="编辑"></button>';
        }
        // 显示 删除按钮
        if(treeNode.showRemoveBtn){
            userNodeBtnStr = userNodeBtnStr + '<button id="diyBtn_del' + treeNode.id + '" class="diyBtn diyBtn-del" title="删除"></button>';
        }
        userNodeBtnStr = userNodeBtnStr + '</div>';

//        var userNodeBtnStr = '<div class="user_node_btn" style="position: absolute;top:0px;right: 0px;">' +
//            '<button id="diyBtn_add' + treeNode.id + '">add</button>' +
//            '<button id="diyBtn_edit' + treeNode.id + '">edit</button>' +
//            '<button id="diyBtn_del' + treeNode.id + '">del</button>' +
//            '</div>';

        aObj.append(userNodeBtnStr);
        // 添加按钮
        var addBtn = $("#diyBtn_add" + treeNode.id);
        if (addBtn) {
            addBtn.bind("click", function () {
                addNodeAction(treeId, treeNode);
            });
        }

        // 编辑按钮
        var editBtn = $("#diyBtn_edit" + treeNode.id);
        if (editBtn) {
            editBtn.bind("click", function () {
                editNodeAction(treeId, treeNode);
            });
        }
        // 删除按钮
        var delBtn = $("#diyBtn_del" + treeNode.id);
        if (delBtn) {
            delBtn.bind("click", function () {
                delNodeAction(treeId, treeNode);
            });
        }

    }

    /**
     * 添加节点触发的事件
     * */
    function addNodeAction (treeId, nodeObj) {
        var zTree = $.fn.zTree.getZTreeObj(treeId);
        // 返回的是新添加的节点
        var newNode = zTree.addNodes(nodeObj, { pId:nodeObj.id, name:"new node"})[0];

        // 添加删除节点配置信息
        if(nodeObj.showRemoveBtn){
            newNode["showRemoveBtn"] = nodeObj.showRemoveBtn;
        }
        // 添加重命名节点配置信息
        if(nodeObj.showRenameBtn){
            newNode["showRenameBtn"] = nodeObj.showRemoveBtn;
        }
        // 添加添加节点配置信息
        if(nodeObj.showAddBtn){
            newNode["showAddBtn"] = nodeObj.showRemoveBtn;
        }
        // 前面是检查是否需要添加自定义的按钮，如果有，则显示为自定义节点的样子
        addDiyDom(treeId, newNode);

        // 返回新添加的节点
        currentVueObj.$emit("add-node",newNode)
    }

    /**
     * 编辑节点触发的事件
     * */
    function editNodeAction (treeId, treeNode,) {
        var nodeNameWidget = $("#"+treeNode.tId+"_span");
        nodeNameWidget.html("<input value='" + treeNode.name + "' id='"+treeNode.tId+"_input'></input>");
        // 将光标定位到表单中
        document.getElementById(treeNode.tId+"_input").focus();
        // 绑定onblur事件
        $("#"+treeNode.tId+"_input").on("blur",function(eventObj){
            var newValue = eventObj.target.value;
            treeNode.name = newValue;

            var treeObj = $.fn.zTree.getZTreeObj(treeId);
            // 修改ztree中的节点数据
            treeObj.editName(treeNode);

            // 返回新添加的节点
            currentVueObj.$emit("edit-node",treeNode)
            // 修改页面的显示
            nodeNameWidget.html(newValue);
        });
    }

    /**
     * 删除节点触发的事件
     * */
    function delNodeAction (treeId, nodeObj) {
        var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
        zTreeObj.removeNode(nodeObj,true);
        // 返回新添加的节点
        currentVueObj.$emit("del-node",nodeObj)
        console.dir(nodeObj);
    }

    /**
     * ztree 初始化完成的事情
     */
    function ztreeVueTools(vueObj) {
        this.init(vueObj);
    }



    ztreeVueTools.prototype = {
        init: function (vueObj) {
            var treeId = vueObj.treeId;
            // 缓存 vue对象，作为一个大的闭包
            currentVueObj = vueObj;
            // 用来缓存ztree对象，直接操作ztree树的
            this.ztreeObj = null;
            // zlst 的Ztree对象，这个是提供给用户使用的
            this.zlstZtreeObj = null;
            // 重置数据
            this.ztreeDataFormat(vueObj);
            // 获取默认 ztreeSetting 配置信息
            var setting = this.getInstanceSetting(vueObj);
            // 获取用户的配置信息
            var userSetting = this.resetSetting(setting, vueObj);

            /**
             * 获取ztree的ID
             * @returns {string}
             */
            this.getTreeId = function () {
                return "#" + treeId;
            };
            /**
             * 获取ztree的ID，不带jquery选择器
             * @returns {string}
             */
            this.getTreeIdStr= function () {
                return treeId;
            };

            // 初始化ztree对象
            this.createZtree(userSetting, vueObj);
        },
        /**
         * 创建ztree对象，最终完成初始化的动作，并且发出初始化完成的事件
         */
        createZtree: function (ztreeSetting, vueObj) {
            // 缓存 ztreeStting 的配置信息
            vueObj.setZtreeSetting(ztreeSetting);
            // 判断用户是否添加了  增加、修改、删除节点的配置，如果添加了，则把配置信息添加到节点中
            // 创建ztree
            $.fn.zTree.init($(this.getTreeId()), ztreeSetting, vueObj.ztreeData);
            // 获取zTreeObj 对象
            this.ztreeObj = $.fn.zTree.getZTreeObj(this.getTreeIdStr());
            // zlst 的Ztree对象，这个是提供给用户使用的
            this.zlstZtreeObj = this.zlstVueZtreeObj(this.ztreeObj);
            // 初始化完成触发的事件
            vueObj.$emit("ztree-inited", {
                "zlstZtreeObj": this.zlstZtreeObj,
                "zTreeObj": this.ztreeObj
            });
        },

        /**
         * 根据用户传递的参数，重置ztree的配置，然后返回
         **/
        resetSetting: function (setting, vueObj) {
            // 设置node 节点的ID 和 PID 的标识
            setting.data.simpleData.idKey = vueObj.nodeIdKey;
            setting.data.simpleData.pIdKey = vueObj.nodePidKey;
            // 是否是simpleData 格式的数据（即数组的形式，非JSON格式）
            setting.data.simpleData.enable = vueObj.isSimpleData;

//            setting.check.enable = vueObj.checkable;
//            setting.check.chkStyle  = vueObj.checkableSetting;
            // 配置是否多选 即 checkbox  或者  radio
            if(vueObj.checkable){
                setting.check = $.extend( setting.check, vueObj.checkableSetting);
                setting.check.enable = vueObj.checkable;
            }

            // 是否显示连线
            setting.view.showLine = vueObj.isShowLine;
            // 是否显示icon图标
            setting.view.showIcon = vueObj.isShowIcon;
            // 是否可拖拽
            setting.edit.enable = vueObj.isDragable;

            // 如果是outlook 风格，需要添加自定义渲染节点的方法
            if (vueObj.isOutlookStyle) {
                setting.view["addDiyDom"] = addDiyDom;
                setting.check["enable"] = false;
            }

            return setting;
        },

        /**
         * zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
         * @param vueObj 代表当前vue 对象
         */
        getInstanceSetting: function (vueObj) {
            // that 代表ztreeVueTools对象
            var that = this;
            var resutlSetting = {
                data: {
                    simpleData: {
                        // 是否是以简单的数据格式作为数据（非JSON，没有直观的显示层级）
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId",
                    },
                },
                view: {
//        // 是否显示树的连线
//        showLine: false,
//        // 是否显示图标icon
//        showIcon:false,
//        // 设置是否允许同时选中多个节点
//        selectedMulti: false,
//        //点击展开按钮
//        dblClickExpand: false,
//        //      dblClickExpand: false,
//        //是否outlook风格
//        addDiyDom: addDiyDom,
                    showLine: false,
                    showIcon: false,
                    selectedMulti: false,
                    dblClickExpand: false,
                },
                check: ztreeCheckableDefaultSetting,
                edit: {
                    enable: true,
                    drag: {
                        // 是否允许拖拽
                        isMove: true,
                        prev: true,
                        inner: true,
                        next: true,
                    },
                    // 是否显示移动节点按钮
                    showRemoveBtn: true,
                    // 是否显示重命名节点按钮
                    showRenameBtn: true,
                },
                callback: {
                    // 点击鼠标右键
                    onRightClick: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-right-click", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 点击事件
                    onClick: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-click", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 折叠事件
                    onCollapse: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-collapse", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 展开事件
                    onExpand: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-expand", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 多选 选中事件
                    onCheck: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-check", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 拖拽释放时 触发的事件
                    onDrop: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-drop", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 重命名 触发的事件
                    onRename: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-rename", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 删除节点 触发的事件
                    onRemove: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-remove", arguments[0], arguments[2], that.ztreeObj);
                    },
                    // 创建节点触发 触发的事件
                    onNodeCreated: function () {
                        // 第一个参数是  jquery.event事件对象，第二个参数是 nodeObject 节点对象，第三个参数是 jquery.ztree对象
                        vueObj.$emit("on-node-created", arguments[0], arguments[2], that.ztreeObj);
                    },
                }
            };
            return resutlSetting;
        },

        /**
         * 传递一个ztree Obj 对象
         */
        zlstVueZtreeObj: function (zTreeObj) {
            // 缓存原始的ztree对象
            var currentZtreeObj = zTreeObj;

            /**
             * 展开所有节点
             */
            var expandAll = function () {
                currentZtreeObj.expandAll(true);
            };

            /**
             * 展开指定的节点，子节点不递归展开
             * @param treeNode 指定展开的节点对象
             */
            var expandNodeOnly = function (treeNode) {
                return currentZtreeObj.expandNode(treeNode, true, false, true);
            };
            /**
             * 展开指定的节点，子节点递归展开
             * @param treeNode 指定展开的节点对象
             */
            var expandNodeAll = function (treeNode) {
                return currentZtreeObj.expandNode(treeNode, true, true, true);
            };

            /**
             * 折叠所有节点
             */
            var collapseAll = function () {
                currentZtreeObj.expandAll(false);
            };

            /**
             * 展开指定的节点，子节点不递归展开
             * @param treeNode 指定展开的节点对象
             */
            var collapseNodeOnly = function (treeNode) {
                return currentZtreeObj.expandNode(treeNode, false, false, true);
            };
            /**
             * 展开指定的节点，子节点递归展开
             * @param treeNode 指定展开的节点对象
             */
            var collapseNodeAll = function (treeNode) {
                return currentZtreeObj.expandNode(treeNode, false, true, true);
            };

            /**
             * 获取所有节点
             */
            var getAllNodes = function () {
                return currentZtreeObj.transformToArray(currentZtreeObj.getNodes());
            };

            /**
             * 根据参数 精确 查找节点 （内容全部匹配）
             * @param key  查找数据对象JSON的key，不能为空
             * @param value   查找key 对应的值，不能为空
             * @param nodeObj   制定节点的查找范围,允许为空
             */
            var getNodesByParam = function (key, value, nodeObj) {
                if (key == undefined || key == "" || key == null) {
                    return [];
                }
                if (value == undefined || value == "" || value == null) {
                    return [];
                }
                if (nodeObj == undefined || nodeObj == "") {
                    nodeObj = null;
                }
                return currentZtreeObj.getNodesByParam(key, value, nodeObj);
            };

            /**
             * 根据参数 模糊 查找节点 （内容全部匹配）
             * @param key  查找数据对象JSON的key，不能为空
             * @param value   查找key 对应的值，不能为空
             * @param nodeObj   制定节点的查找范围,允许为空
             */
            var findNodesByParam = function (key, value, nodeObj) {
                if (key == undefined || key == "" || key == null) {
                    return [];
                }
                if (value == undefined || value == "" || value == null) {
                    return [];
                }
                if (nodeObj == undefined || nodeObj == "") {
                    nodeObj = null;
                }
                return currentZtreeObj.getNodesByParamFuzzy(key, value, nodeObj);
            };



            /**
             * 根据tid 查找节点
             * @param tid   ztree 动态节点的唯一标志,是一个字符串
             * @returns {JSON}
             */
            var findNodeByTid = function (tid) {
                if (tid == undefined || tid == "" || tid == null) {
                    return null;
                }
                return currentZtreeObj.getNodeByTId(tid);
            };

            /**
             * 获取用户选中的节点
             * @returns {Array}
             */
            var getSelectedNodes = function () {
                return currentZtreeObj.getSelectedNodes();
            };

            /**
             * 定位某个节点，
             * @param treeNode  需要定位的节点
             * @param isExpand   是否需要展开节点
             * @param isExpandAllSubNode   是否需要展开所有的子节点
             */
            var locationNode = function (treeNode, isExpand, isExpandAllSubNode) {
                //      expandNodeOnly(treeNode)
                expandNodeAll(treeNode)
            };

            /**
             * 获取所有选中的节点 —— 包含半选中的节点
             */
            var getAllCheckedNodes = function () {
                return currentZtreeObj.getCheckedNodes(true);
            };

            /**
             * 获取所有没有选中的节点
             */
            var getAllUncheckedNodes = function () {
                return currentZtreeObj.getCheckedNodes(false);
            };


            /**
             * 获取所有选中的叶子节点
             */
            var getCheckedLeafNodes = function () {
                var checkedNodes = getAllCheckedNodes();
                var length = checkedNodes.length;
                var result = [];
                for (var i = 0; i < length; i++) {
                    var tempNode = checkedNodes[i];
                    if (tempNode.check_Child_State == -1 && tempNode.checked) {
                        result.push(tempNode);
                    }
                }
                return result;
            };


            /**
             * 获取所有"全"选中的节点 —— 包含父节点
             */
            var getCheckedAllNodes = function () {
                var checkedNodes = getAllCheckedNodes();
                var length = checkedNodes.length;
                var result = [];
                for (var i = 0; i < length; i++) {
                    var tempNode = checkedNodes[i];
                    if ((tempNode.check_Child_State == -1 && tempNode.checked) || (tempNode.check_Child_State == 2 && tempNode.checked)) {
                        result.push(tempNode);
                    }
                }
                return result;
            };

            /**
             * 根据参数查找节点,然后展开（或者全部展开）
             * @param key  查找数据对象JSON的key，不能为空
             * @param value   查找key 对应的值，不能为空
             * @param isExpandAll   是否展开所有的节点,默认是false展开第一个
             */
            var findNodeExpand = function (key, value, isExpandAll) {
                var findNodes = findNodesByParam(key, value);
                var length = findNodes.length;
                if (length <= 0) {
                    return []
                }
                if (!isExpandAll) {
                    expandNodeOnly(findNodes[0]);
                } else {
                    for (var i = 0; i < length; i++) {
                        var tempNode = findNodes[i];
                        expandNodeOnly(tempNode);
                    }
                }
            };

            /**
             * 根据参数查找节点,然后展开所有的子节点（或者全部展开）
             * @param key  查找数据对象JSON的key，不能为空
             * @param value   查找key 对应的值，不能为空
             * @param isExpandAll   是否展开所有的节点,默认是false展开第一个
             */
            var findNodeExpandAllSubnode = function (key, value, isExpandAll) {
                var findNodes = findNodesByParam(key, value);
                var length = findNodes.length;
                if (length <= 0) {
                    return []
                }
                if (!isExpandAll) {
                    locationNode(findNodes[0]);
                } else {
                    for (var i = 0; i < length; i++) {
                        var tempNode = findNodes[i];
                        locationNode(tempNode);
                    }
                }
            };

            return {
                // 展开所有节点
                "expandAll": expandAll,
                "expandNodeOnly": expandNodeOnly,
                "expandNodeAll": expandNodeAll,
                "collapseAll": collapseAll,
                "collapseNodeOnly": collapseNodeOnly,
                "collapseNodeAll": collapseNodeAll,
                "getAllNodes": getAllNodes,
                "findNodesByParam": findNodesByParam,
                "getNodesByParam": getNodesByParam,
                "findNodeByTid": findNodeByTid,
                "getSelectedNodes": getSelectedNodes,
                "locationNode": locationNode,
                "getAllCheckedNodes": getAllCheckedNodes,
                "getAllUncheckedNodes": getAllUncheckedNodes,
                "getCheckedLeafNodes": getCheckedLeafNodes,
                "getCheckedAllNodes": getCheckedAllNodes,
                "findNodeExpand": findNodeExpand,
                "findNodeExpandAllSubnode": findNodeExpandAllSubnode,
            }
        },

        /**
         * 对ztree 的数据做转换
         * 1、 根据用户自定义的字段，作为显示的内容
         */
        ztreeDataFormat: function (vueObj) {
            var length = vueObj.ztreeData.length;
            for (var i = 0; i < length; i++) {
                var tempObj = vueObj.ztreeData[i];
                // 数据结构是simpleData 并且 显示的字段与默认字段不一致
                if (vueObj.isSimpleData == true && vueObj.nodeHtmlKey != "nodeHtml") {
                    tempObj["name"] = tempObj[vueObj.nodeHtmlKey];
                }
                // 添加删除节点配置信息
                if(vueObj.showRemoveBtn){
                    tempObj["showRemoveBtn"] = true;
                }
                // 添加重命名节点配置信息
                if(vueObj.showRenameBtn){
                    tempObj["showRenameBtn"] = true;
                }
                // 添加添加节点配置信息
                if(vueObj.showAddBtn){
                    tempObj["showAddBtn"] = true;
                }

            }
        },

    };


    export default {
        props: {
            // 外部传递过来ztreeid 的唯一标志
            ztreeIdProp:{
                type: String,
//                default: ""
                default: function(){
                    return new Date().getTime() + "" + Math.floor(Math.random() * 1000);
                }
            },
            // 用户传递过来的数据
            ztreeData: {},
            // 是否是simpleData 格式的数据（即数组的形式，非JSON格式）
            isSimpleData: {
                type: Boolean,
                default: true
            },
            // 是否是 outlook 风格
            isOutlookStyle: {
                type: Boolean,
                default: true
            },
            // 指明数据节点的 id  key的名字，
            nodeIdKey: {
                type: String,
                default: "id"
            },
            // 指明数据节点的 pid  key的名字，
            nodePidKey: {
                type: String,
                default: "pId"
            },
            // 指明数据节点的 name  key的名字，
            nodeHtmlKey: {
                type: String,
                default: "nodeHtml"
            },
            // 是否是 多选，呈现出checkbox
            checkable: {
                type: Boolean,
                default: false
            },
            // 选择控件的类型
            checkType: {
                type: String,
                default: "checkbox"
            },
            // checkbox 和 radio 的配置文件
            checkableSetting: {
                type: Object,
                default: function(){
                    return {};
                }
            },
            // 是否显示图标
            isShowIcon: {
                type: Boolean,
                default: false
            },
            // 是否显示line
            isShowLine: {
                type: Boolean,
                default: false
            },
            // 是否可以拖拽
            isDragable: {
                type: Boolean,
                default: false
            },
            // 显示删除按钮
            showRemoveBtn: {
                type: Boolean,
                default: false
            },
            // 显示重命名按钮
            showRenameBtn: {
                type: Boolean,
                default: false
            },
            // 显示添加按钮
            showAddBtn: {
                type: Boolean,
                default: false
            },

        },
        mounted: function () {
            this.treeId = this.ztreeIdProp;
            this.$nextTick(function(){
                new ztreeVueTools(this);
            });
        },
        data: function () {
            return {
                // ztree 空间的 id  作为唯一标志
                treeId: "",
                // 缓存 ztree 对象的配置信息
                ztreeSetting: {},
            };
        },
        // 监听传入数据的变化
        watch: {
            // 用户传递过来的数据
            ztreeData: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 是否是simpleData 格式的数据（即数组的形式，非JSON格式）
            isSimpleData: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 是否是 outlook 风格
            isOutlookStyle: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 指明数据节点的 id  key的名字，
            nodeIdKey: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 指明数据节点的 pid  key的名字，
            nodePidKey: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 指明数据节点的 name  key的名字，
            nodeHtmlKey: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 是否是 多选，呈现出checkbox
            checkable: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 是否显示图标
            isShowIcon: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 是否显示line
            isShowLine: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
            // 是否可以拖拽
            isDragable: function (newValue, oldValue) {
                $.fn.zTree.destroy(this.treeId);
                new ztreeVueTools(this);
            },
        },
        methods: {
            // 获取ztree对象
            getZtreeObj: function () {
                return zTreeObj;
            },
            // 缓存ztree的配置信息
            setZtreeSetting: function (ztreeSetting) {
                this.ztreeSetting = ztreeSetting;
            }
        },
    }
</script>

<style lang="scss">
    @import '../../style/styleKit.scss';
    /* 节点的高度 */
    $ztree-li-height: 30px;
    .zlst-module-ztree {
        *{
            font-size:14px;
        }
        li {
            padding: 0;
            margin: 0;
            list-style: none;
            line-height: $ztree-li-height!important;
            text-align: left;
            white-space: nowrap;
            outline: 0;
            a{ color:$color-font2}
            a.curSelectedNode {
                background: none;
                border: none;
            }
            /* 自定义按钮 */
            .diyBtn{
                width:18px;
                height:18px;
                border:none;
                background-image:url("../../../static/ztree/css/zTreeStyle/img/zTreeStandard.png");
                background-color:transparent;
                vertical-align: middle;
            }
            /* 相邻的自定义间隔 */
            .diyBtn{margin-right:20px}
            /* 节点新增按钮 */
            .diyBtn-add{
                background-position: 0 -42px!important;
            }
            /* 节点编辑按钮 */
            .diyBtn-edit{
                background-position: -40px -42px!important;
            }
            /* 节点删除按钮 */
            .diyBtn-del{
                background-position: -20px -42px!important;
            }
            /* z-tree按钮图标 */
            span.button{
                background-image:url("../../../static/ztree/css/zTreeStyle/img/zTreeStandard.png")!important;
            }
            span.button.noline_docu{
                background: none!important;
            }

            /* 叶子节点无按钮 */
            button.noline_docu{
                background-image:none!important;
                cursor: default;
            }

            /* 节点展开按钮状态 */
            span.button.noline_open {
                background-position: -18px -17px!important;
            }

            /* 节点收缩按钮状态 */
            span.button.noline_close {
                background-position: 2px -17px!important;
            }

            /* 复选框状态 */

            span.button.chk {
                width: 14px;
                height: 14px;
            }

            span.button.chk.radio_false_full {
                background-position: -54px -66px!important;
            }
            span.button.chk.radio_false_full_focus {
                background-position: -54px -66px!important;
            }
            span.button.chk.radio_false_disable {
                background-position: -54px -66px !important;
                opacity: 0.5;
            }

            span.button.chk.radio_true_full {
                background-position: 0px -65px!important;
            }
            span.button.chk.radio_true_full_focus {
                background-position: 0px -65px!important;
            }
            span.button.chk.radio_true_disable {
                background-position: -19px -65px !important;
            }


            span.button.chk.radio_false_part {
                 background-position: -36px -65px!important;
             }
            span.button.chk.radio_false_part_focus {
                background-position: -36px -65px!important;
            }

            span.button.chk.radio_true_part {
                background-position: -36px -65px!important;
            }
            span.button.chk.radio_true_part_focus {
                background-position: -36px -65px!important;
            }

            span.button.chk.checkbox_false_disable {
                background-position: -54px 0!important;
                opacity: 0.5;
                cursor: not-allowed;
            }
            span.button.chk.checkbox_false_full {
                background-position: -54px 0!important;
            }
            span.button.chk.checkbox_false_full_focus {
                background-position: -54px 0!important;
            }
            span.button.chk.checkbox_true_full {
                background-position: 0 0!important;
            }
            span.button.chk.checkbox_true_full_focus {
                background-position: 0 0!important;
            }

            span.button.chk.checkbox_true_part {
                background-position: -36px 0!important;
            }
            span.button.chk.checkbox_true_part_focus {
                background-position: -36px 0!important;
            }
            span.button.chk.checkbox_false_part {
                background-position: -36px 0!important;
            }
            span.button.chk.checkbox_false_part_focus {
                background-position: -36px 0!important;
            }
            span.button.chk.checkbox_true_disable {
                background-position: 0 0!important;
                opacity: 0.8;
                cursor: not-allowed;
            }
        }
    }
    /* outlook风格 */
    .outlooktree {
        li {
            line-height: $ztree-li-height;
            a {
                width: 100%;
                &:hover {
                    /*鼠标悬浮，出现用户操作按钮*/
                    text-decoration: none;
                    .user_node_btn{
                        display: inline-block;
                    }
                }
                /*默认不显示用户操作按钮*/
                .user_node_btn{
                    display: none;
                }
            }
            /*  拖拽时的遮罩层 */
            a.tmpTargetNode_inner {
                height: $ztree-li-height;
            }
            ul {
                margin: 0!important;
                padding: 0!important;
            }
            /* 节点hover状态 */
            a:hover{
                border: 0;
                height: $ztree-li-height;
                background-color:rgba(237,241,244,0.6);
            }
            /* 节点选中的状态 */
            a.curSelectedNode {
                background-color: #edf1f4;

            }
            span {
                line-height: $ztree-li-height;
            }
            /* 复选框隐藏状态 */
            button.noline_docu {
                cursor: default;
            }
        }

    }

</style>
